<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜单维护</title>
    <#include "../../commonFile/quote.ftl"/>
</head>
<body class="container-fluid">
<div class="col-xs-3">
    <div style="width: 99%;height: 100%;" id="tree"></div>
</div>
<!--菜单表格-->
<div class="col-xs-9">
    <div id="baseMenuToolbar">
        <form class="form-inline" role="form" style="display: inline-block;">
            <div class="form-group">
                <input type="text" class="form-control input-sm" id="searchName" placeholder="请输入名称">
            </div>
            <button class="btn btn-default btn-sm" type="button" onclick="baseMenu.searchMenu()">查询</button>
        </form>
        <button class="btn btn-default btn-sm" type="button "  onclick="baseMenu.addMenu()">新增</button>
    </div>
    <table id="baseMenuTable" class="table  table-striped table-bordered table-hover"></table>
</div>
<!--新增菜单模态框-->
<div class="modal fade" id="menuModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">新增菜单</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <form id="addMenuForm"  class="form-horizontal">
                            <div class="form-group">
                                <label for="account">菜单名称</label>
                                <input type="text" class="form-control required " maxlength = "100" id="menuName" name="name" placeholder="请输入菜单名">
                            </div>
                            <div class="form-group">
                                <label for="account">菜单路径</label>
                                <input type="text" class="form-control required " maxlength = "100" id="menupath" name="path" placeholder="请输入菜单路径">
                            </div>
                            <div class="form-group">
                                <label for="phone">是否按钮</label>
                                <select id="menuIsmenu" name="ismenu" class="required">
                                    <option value="true">是</option>
                                    <option value="false">否</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="baseMenu.saveAddMenu()">保存</button>
            </div>
        </div>
    </div>
</div>
<!--修改菜单模态框-->
<div class="modal fade" id="menuEditModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">修改菜单</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-8 col-xs-offset-2">
                        <form id="editMenuForm"  class="form-horizontal">
                            <input type="hidden" id="id" name="id">
                            <div class="form-group">
                                <label for="account">菜单名称</label>
                                <input type="text" class="form-control required " maxlength = "100" id="menuEditName" name="name" placeholder="请输入菜单名">
                            </div>
                            <div class="form-group">
                                <label for="account">菜单路径</label>
                                <input type="text" class="form-control required " maxlength = "100" id="menuEditPath" name="path" placeholder="请输入菜单路径">
                            </div>
                            <div class="form-group">
                                <label for="phone">是否按钮</label>
                                <select id="menuEditIsmenu" name="ismenu" class="required">
                                    <option value="true">是</option>
                                    <option value="false">否</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="baseMenu.saveEditMenu()">保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    //全局变量baseMenu（菜单维护）
    var baseMenu = {};
    //菜单树ID
    baseMenu.menuId;
    //菜单树节点等级
    baseMenu.level;
    //初始化表格
    baseMenu.tableInit = function(){
        $("#baseMenuTable").bootstrapTable({
            url:'/systemManagerInfo/menuInfo',  //获取表格数据
            contentType:'application/x-www-form-urlencoded; charset=UTF-8',//使用post传参，去掉后无法成功
            method: "post",
            toolbar:"#baseMenuToolbar",
            cache: false,            //禁用ajax缓存
            striped: true,           //表格显示条纹
            pagination: true,        //在底部显示分页组件
            pageList: [10, 20],       //设置页面可以显示的数据条数
            pageSize: 10,             // 页面数据条数
            pageNumber: 1,            // 首页页码
            sidePagination: 'server', // 设置为服务器端分页
            showColumns:true,        //是否显示内容列下拉框
            showToggle:true,         //切换详细视图和列表视图
            queryParamsType: '',
            queryParams:baseMenu.queryParams,
            idField:'id',             //指定主键列
            columns:[
                {
                    checkbox: true,   //显示一个勾选框
                    align: 'center'   //居中显示
                },
                {
                    field:'name',  //返回json中的name
                    title:'姓名',   //表格表头显示文字
                    align:'center',   //左右居中
                    valign: 'middle' // 上下居中
                },
                {
                    field:'path',
                    title:'路径',
                    align:'center',
                    valign: 'middle',
                },
                {
                    field:'level',
                    title:'等级',
                    align:'center',
                    valign: 'middle'
                },
                {
                    field:'isyes',
                    title:'是否有效',
                    align:'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if(value=="1"){
                            value = "有效";
                        };
                        if(value=="0"){
                            value = "无效";
                        };
                        return value;
                    }
                },{
                    field:'id',
                    title:'操作',
                    align:'center',
                    valign: 'middle',
                    formatter:function(value, row, index){
                        var id = value;
                        var name = row.name;
                        var path = row.path;
                        var ismenu = row.ismenu;
                        var result = "";
                        result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"baseMenu.editBaseInfo('" + id + "','"+name+"','"+path+"','"+ismenu+"')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
                        result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"baseMenu.deleteById('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
                        return result;
                    }
                }
            ]
        });
    };
    //初始化菜单树treeview
    baseMenu.treeViewInit = function () {
        $.ajax({
            type: 'post',
            url: '/systemManagerInfo/menuTreeInfo',
            async: false,
            dataType: 'json',
            success: function (result) {
                //初始化treeView
                $('#tree').treeview({
                    highlightSelected: true,//当选择节点时是否高亮显示。
                    showBorder: true,//是否在节点上显示边框。
                    showImage: true,
                    showIcon:true,
                    data: result.data,
                    onNodeSelected: function (event, data) {
                        baseMenu.menuId=data.id;
                        baseMenu.level = data.level;
                        $("#baseMenuTable").bootstrapTable("refresh",{silent: true});
                    }
                });
            }
        });
    };
    //表格传参的方法
    baseMenu.queryParams = function (params){   //请求服务器数据时，添加额外参数
        var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            pageSize:params.pageSize, // 每页要显示的数据条数
            pageNum:params.pageNumber,    // 页码
            searchName:$("#searchName").val(),
            menuId:baseMenu.menuId
        };
        return temp;
    };
    //查询按钮点击事件
    baseMenu.searchMenu = function () {
        $("#baseMenuTable").bootstrapTable("refresh",{silent: true})
    };
    //新增按钮点击事件
    baseMenu.addMenu = function () {
        if(baseMenu.menuId==undefined){
            alert("请先在左侧菜单树上选择要添加菜单的位置");
            return;
        }
        $('form[id=addMenuForm] label.error').remove();
        //清空表单
        $(':input','#addMenuForm')
                .not(':button, :submit, :reset')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        $('#menuModal').modal('show');
    };
    //新增模态框-保存按钮事件
    baseMenu.saveAddMenu = function () {
        var a,obj;
        a = baseMenu.level+1;
        if($('#addMenuForm').valid()){
            obj = {
                name:$("#menuName").val(),
                father_id:baseMenu.menuId,
                level:a,
                path:$("#menupath").val(),
                ismenu:$("#menuIsmenu").val()
            };
            $.ajax({
                type: 'post',
                url: '/systemManagerInfo/addMenu',
                async: false,
                data:JSON.stringify(obj),
                contentType : 'application/json',
                success: function (result) {
                    if(result.success==true){
                        baseMenu.treeViewInit();
                        $("#baseMenuTable").bootstrapTable("refresh",{silent: true});
                        $('#menuModal').modal('hide');
                        alert(result.message);
                    }else{
                        alert(result.message);
                    }
                },
                error:function () {
                    alert("Ajax失败！");
                }
            });
        }
    };
    //修改按钮点击事件
    baseMenu.editBaseInfo = function (id,name,path,ismenu) {
        //清空验证信息
        $('form[id=editMenuForm] label.error').remove();
        //清空表单
        $(':input','#editMenuForm')
                .not(':button, :submit, :reset')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
        $('#menuEditModal').modal('show');
        $("#id").val(id);
        $("#menuEditName").val(name);
        $("#menuEditPath").val(path);
        var numbers = $("#menuEditIsmenu").find("option"); //获取select下拉框的所有值
        for (var j = 0; j < numbers.length; j++) {
            if ($(numbers[j]).val() == ismenu) {
                $(numbers[j]).attr("selected", "selected");
            };
        }
    };
    //修改模态框-保存按钮事件
    baseMenu.saveEditMenu = function () {
        if($('#editMenuForm').valid()){
            var obj = {
                id:$("#id").val(),
                name:$("#menuEditName").val(),
                path:$("#menuEditPath").val(),
                ismenu:$("#menuEditIsmenu").val()
            };
            $.ajax({
                type:'post',
                url:'/systemManagerInfo/editMenu',
                data:JSON.stringify(obj),
                contentType:'application/json',
                success:function(result){
                    if(result.success){
                        $("#baseMenuTable").bootstrapTable("refresh");
                        $('#menuEditModal').modal('hide');
                        alert(result.message);
                    }else{
                        alert(result.message);
                    }
                },error:function(){
                    alert("Ajax失败！");
                }
            });
        }
    };
    //删除（禁用）菜单
    baseMenu.deleteById = function (id) {
        var obj = {
            id:id
        };
        $.ajax({
            type:'post',
            url:'/systemManagerInfo/disableMenu',
            data:JSON.stringify(obj),
            contentType:'application/json',
            success:function(result){
                if(result.success){
                    baseMenu.treeViewInit();
                    $("#baseMenuTable").bootstrapTable("refresh");
                    alert(result.message);
                }else{
                    alert(result.message);
                }
            },error:function(){
                alert("Ajax失败！");
            }
        });

    };
    //文档就绪事件
    $(function () {
        baseMenu.treeViewInit();
        baseMenu.tableInit();
    });
</script>
</body>
</html>